<template>
  <div class="basic-map-test">
    <div class="test-info">
      <h3>基础地图测试</h3>
      <p>状态: {{ status }}</p>
      <p>API密钥: {{ apiKeyStatus }}</p>
      <p>TMap对象: {{ tmapStatus }}</p>
    </div>
    <div ref="mapContainer" class="map-container"></div>
    <div class="test-buttons">
      <el-button @click="initMap" type="primary" :loading="loading">初始化地图</el-button>
      <el-button @click="clearMap" type="default">清除地图</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { MAP_CONFIG } from '@/config/map'

const mapContainer = ref(null)
const map = ref(null)
const status = ref('未初始化')
const loading = ref(false)
const apiKeyStatus = ref('检查中...')
const tmapStatus = ref('检查中...')

const checkStatus = () => {
  // 检查API密钥
  if (MAP_CONFIG.API_KEY && MAP_CONFIG.API_KEY !== 'YOUR_TENCENT_MAP_KEY') {
    apiKeyStatus.value = '已配置'
  } else {
    apiKeyStatus.value = '未配置'
  }
  
  // 检查TMap对象
  if (window.TMap) {
    tmapStatus.value = '已加载'
  } else {
    tmapStatus.value = '未加载'
  }
}

const initMap = async () => {
  loading.value = true
  status.value = '正在初始化...'
  
  try {
    // 检查TMap对象
    if (!window.TMap) {
      throw new Error('腾讯地图SDK未加载，请检查网络连接')
    }
    
    // 检查API密钥
    if (!MAP_CONFIG.API_KEY || MAP_CONFIG.API_KEY === 'YOUR_TENCENT_MAP_KEY') {
      throw new Error('API密钥未配置')
    }
    
    // 创建地图实例
    map.value = new window.TMap.Map(mapContainer.value, {
      center: new window.TMap.LatLng(39.908823, 116.397470),
      zoom: 12,
      mapTypeId: 1
    })
    
    status.value = '初始化成功'
    ElMessage.success('地图初始化成功！')
    
  } catch (error) {
    console.error('地图初始化失败:', error)
    status.value = `初始化失败: ${error.message}`
    ElMessage.error(`地图初始化失败: ${error.message}`)
  } finally {
    loading.value = false
  }
}

const clearMap = () => {
  if (map.value) {
    map.value.destroy()
    map.value = null
    status.value = '已清除'
  }
}

onMounted(() => {
  nextTick(() => {
    checkStatus()
  })
})
</script>

<style scoped>
.basic-map-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-info {
  background: #f5f5f5;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.test-info h3 {
  margin: 0 0 12px 0;
  color: #333;
}

.test-info p {
  margin: 4px 0;
  font-size: 14px;
}

.map-container {
  width: 100%;
  height: 400px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 16px;
  background: #f9f9f9;
}

.test-buttons {
  display: flex;
  gap: 12px;
}
</style>
